<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电商管理前端</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../styles/common.css" />
    <link rel="stylesheet" href="../styles/index.css" />
    <link rel="stylesheet" href="../styles/icon/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/all.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-JD-index.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-cart.css" />
    <style type="text/css">
        li{
            float: left;
        }
    </style>
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="app">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <span v-if="user===''">请<a href="userlogin.html">登录</a></span>
                        <span v-else>{{user}},欢迎你</span>
                        <span><a href="register.html">免费注册</a></span>
                    </ul>
                    <div class="fr typelist" style="margin-top: -29px">
                        <ul class="types" style="margin-left: 390px">
                            <li class="f-item">
                                <span>
                                    <a href="shopping.html">首页</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="cart.html">我的购物车</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="home.html">个人信息</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="/logout">退出</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <img src="../images/logo2.png" style="margin-left: -40px; height: 200px; width: 250px;margin-top: -30px;">
                    </div>
                    <div class="yui3-u Rit searchArea" style="margin-right: -100px;margin-top: 72px;font-size: 40px;font-family: '宋体';color: red;">
                        欢迎来到未来生活！
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="like" style="margin-top: 80px">
        <div class="py-container">
            <div class="title">
                <h3 class="fl">所有商品</h3>
            </div>
            <div class="navbar-inner filter" style="float: left;font-size: 18px">
                <ul class="sui-nav">
                    <li class="active">
                        <a href="#" @click="findPage(0)">全部</a>
                    </li>
                    <template v-for="item in goodsKind" :label="item.name" :value="item.id">
                        <li><a href="#" @click="findPage(item.id)">{{item.name}}</a></li>
                    </template>
                </ul>
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column prop="picture" label="商品图片" align="center" style="width: 50%;height: 50%">
                    <template slot-scope="scope">
                        <a :href="'/pages/details.html?id='+(scope.row.id)">
                            <img slot="reference" :src="getpicture(scope.row.picture)" style="width: 120px;height: 120px" alt="">
                        </a>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="price" label="商品价格" align="center"></el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script type="text/javascript" src="../js/all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data (){
            return {
                pagination: {//分页相关模型数据
                    currentPage: 1,//当前页码
                    pageSize:3,//每页显示的记录数
                    total:0,//总记录数
                },
                user:'',
                goodsKind:[],
                kindsId:0,
                dataList: [],
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            axios.get("/goodskind/findAll").then((res) => {
                if(res.data.flag){
                    this.goodsKind=res.data.data;
                }
            });
            axios.get("/user/getUsername").then((res) => {
                if(res.data.flag){
                    this.user=res.data.data;
                }
            });
            this.findPage(0);
        },
        methods: {
            findPage(x) {
                this.kindsId=x;
                this.pagination.currentPage=1;
                axios.get("/goods/goodspage?gid="+x+"&currentPage="+this.pagination.currentPage+"&pageSize="+this.pagination.pageSize).then((res) => {
                    this.pagination.total=res.data.data.total;
                    this.dataList=res.data.data.records;
                })
            },
            findPage1(x) {
                this.kindsId=x;
                axios.get("/goods/goodspage?gid="+x+"&currentPage="+this.pagination.currentPage+"&pageSize="+this.pagination.pageSize).then((res) => {
                    this.pagination.total=res.data.data.total;
                    this.dataList=res.data.data.records;
                })
            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage=currentPage;
                this.findPage1(this.kindsId);
            },
            getpicture(picture){
                return "http://106.13.226.130:9000/goods/"+picture;
            }
        }
    })
</script>
</html>